<template>
	<div class="profile realTimeDataClass ">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/游戏分析/运营报表/</span>
				<span>{{title}}</span>
			</div>
			<div class="right_header_time">
				<div class="block">
					<span>选择日期范围：</span>
					<el-date-picker
						size='small'
						v-model="date"
						type="daterange"
						align="left"
						placeholder="选择日期范围"
						@change='dateChange'
						:picker-options="pickerOptions"></el-date-picker>
				</div>
			</div>
		</div>
		<div class="right_content">
			<div class="list1">
				<div class="list1_title">
					<p>昨日数据</p>
					<div class="list1_intro">
						<el-popover
							ref="popover1"
							placement="top-start"
							width="200"
							trigger="hover">
							<p style="border-bottom:1px solid #cccccc;" v-for = "(value,key) in introduceHover1" :key="key">
								<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{value.title}}：</span>
								<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">{{value.message}}
								</span>
							</p>
						</el-popover>
						<i class="el-icon-information"  v-popover:popover1></i>
					</div>
				</div>
				<div class="table1">
					<el-table :data="tableData1" border style="width: 100%"  :row-class-name="tableRowClassName">
						<el-table-column v-for="(val,key) in tableHeader1" :prop="val.prop" :key="key" :label="val.label"  align="center"></el-table-column>
					</el-table>
				</div>
			</div>
			<div class="list2">
				<div class="list2_title">
					<p>总体数据</p>
					<div class="list2_intro">
						<el-popover
							ref="popover2"
							placement="top-start"
							width="200"
							trigger="hover">
							<p style="border-bottom:1px solid #cccccc;" v-for = "(value,key) in introduceHover2" :key="key">
								<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{value.title}}：</span>
								<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">{{value.message}}
								</span>
							</p>
						</el-popover>
						<i class="el-icon-information"  v-popover:popover2></i>
					</div>
				</div>
				<v-details :datas="datas"></v-details>
			</div>
			<div class="list3">
				<div class="list3_title">
					<p>在线趋势</p>
					<div class="list3_intro">
						<el-popover
							ref="popover3"
							placement="top-start"
							width="200"
							trigger="hover">
							<p style="border-bottom:1px solid #cccccc;" v-for = "(value,key) in introduceHover3" :key="key">
								<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{value.title}}：</span>
								<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">{{value.message}}
								</span>
							</p>
						</el-popover>
						<i class="el-icon-information"  v-popover:popover3></i>
					</div>
				</div>
				<!-- <div style="height:350px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div> -->
				<div class="profile1" id='profile1'></div>
			</div>
			<div class="list4">
				<div class="list4_title">
					<p>活跃情况</p>
					<div class="list4_intro">
						<el-popover
							ref="popover4"
							placement="top-start"
							width="200"
							trigger="hover">
							<p style="border-bottom:1px solid #cccccc;" v-for = "(value,key) in introduceHover4" :key="key">
								<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{value.title}}：</span>
								<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">{{value.message}}
								</span>
							</p>
						</el-popover>
						<i class="el-icon-information"  v-popover:popover4></i>
					</div>
				</div>
				<!-- <div style="height:350px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div> -->
				<div class="profile2" id='profile2'></div>
			</div>
			<div class="list5">
				<div class="list5_title">
					<p>留存情况</p>
					<div class="list5_intro">
						<el-popover
							ref="popover5"
							placement="top-start"
							width="200"
							trigger="hover">
							<p style="border-bottom:1px solid #cccccc;" v-for = "(value,key) in introduceHover5" :key="key">
								<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{value.title}}：</span>
								<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">{{value.message}}
								</span>
							</p>
						</el-popover>
						<i class="el-icon-information"  v-popover:popover5></i>
					</div>
				</div>
				<!-- <div style="height:350px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div> -->
				<div class="profile3" id='profile3'></div>
			</div>
			<div class="list6">
				<div class="list6_title">
					<p>付费情况</p>
					<div class="list6_intro">
						<el-popover
							ref="popover6"
							placement="top-start"
							width="200"
							trigger="hover">
							<p style="border-bottom:1px solid #cccccc;" v-for = "(value,key) in introduceHover6" :key="key">
								<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{value.title}}：</span>
								<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">{{value.message}}
								</span>
							</p>
						</el-popover>
						<i class="el-icon-information"  v-popover:popover6></i>
					</div>
				</div>
				<!-- <div style="height:350px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div> -->
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  @select="handle">
					<el-menu-item index="1">
						付费额
					</el-menu-item>
					<el-menu-item index="2">
						付费人数
					</el-menu-item>
					<el-menu-item index="3">
						付费率&新增当日付费率
					</el-menu-item>
					<el-menu-item index="4">
						付费ARPU&活跃ARPU
					</el-menu-item>
				</el-menu>
				<div class="profile4" id="profile4"></div>
			</div>
			<div class="list7">
				<div class="list7_title">
					<p>游戏时长（m）</p>
					<div class="list7_intro">
						<el-popover
							ref="popover7"
							placement="top-start"
							width="200"
							trigger="hover">
							<p style="border-bottom:1px solid #cccccc;" v-for = "(value,key) in introduceHover7" :key="key">
								<span style="font-size:12px;font-weight: bold;line-height:20px;display:block;">{{value.title}}：</span>
								<span style="font-size:12px;line-height:20px;text-indent:2em;display:block;">{{value.message}}
								</span>
							</p>
						</el-popover>
						<i class="el-icon-information"  v-popover:popover7></i>
					</div>
				</div>
				<!-- <div style="height:350px;width:100%;position:absolute;" v-if="realLoadShow" v-loading="realLoadShow" element-loading-text="拼命加载中"></div> -->
				<div class="profile5" id='profile5'></div>
			</div>
		</div>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./profile.styl"></style>
<script src="./profile.js"></script>
